@charset "utf-8";
#box{
    width: 500px;
    height: 500px;
    /*background: #ccc;*/
    margin: 50px auto;
    position: relative;
}
#one{
    width: 50px;
    height: 500px;
    background: #e3e3e3;
    position: absolute;
    top:200px;
    left: 235px;

}
#two{
     width: 300px;
    height: 300px;
    /*background: pink;*/
    margin-top: 100px;
    position: absolute;
    left: 100px;
}
#fy1{
    width: 300px;
    height: 80px;
    background: #f0253d;
    position: absolute;
    right: 150px;
    top:110px;
    border-radius:0px  0px  0px  80px  ;
    transform-origin:right;
}
#fy2{
    width: 300px;
    height: 80px;
    background: yellow;
    position: absolute;
    left: 150px;
    top:110px;
    border-radius:0px  80px  0px  0px  ;
    transform-origin:left;
}
#fy3{
    width: 80px;
    height: 300px;
    background:#8925f0;
    position: absolute;
    top:-150px;
    right: 110px;
    border-radius:80px  0px  0px  00px  ;
    transform-origin:bottom;
}
#fy4{
    width: 80px;
    height: 300px;
    background:  #00d238;
    position: absolute;
    bottom:-150px;
    left: 110px;
    border-radius:0px  0px  80px  0px  ;
    transform-origin:top;
}
#three{
    width: 90px;
    height: 90px;
    background: pink;
    border-radius: 50%;
    position:absolute;
    top:200px;
    left: 205px
}
#fy1,#fy2,#fy3,#fy4{
    animation:yeZi 1.2s linear 1s infinite;
}
@keyframes yeZi{
    0%{
        transform:rotate(0);
    }
    100%{
        transform:rotate(360deg);
    }
